<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心愿墙 - 社交许愿列表</title>
    
    <!-- 引入外部资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <style>
        :root {
            --primary: #FF5E84;
            --primary-light: #FF8FA7;
            --secondary: #7B61FF;
            --success: #36D399;
            --warning: #FFAB00;
            --dark: #1E293B;
            --light: #F8FAFC;
            --gray: #94A3B8;
            --light-gray: #E2E8F0;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
            --shadow: 0 4px 16px rgba(0,0,0,0.12);
            --transition: all 0.3s ease;
            --radius: 12px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #FFF5F7;
            color: var(--dark);
            line-height: 1.6;
            padding-bottom: 3rem;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 页面标题样式 */
        .page-header {
            padding: 3rem 0 2rem;
            text-align: center;
            margin-bottom: 2rem;
            background: linear-gradient(135deg, #FFF0F3 0%, #FFEFF3 100%);
            border-radius: 0 0 30px 30px;
        }
        
        .page-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.75rem;
            position: relative;
            display: inline-block;
        }
        
        .page-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 10%;
            width: 80%;
            height: 4px;
            background-color: var(--primary-light);
            border-radius: 2px;
        }
        
        .page-subtitle {
            font-size: 1.1rem;
            color: var(--dark);
            max-width: 700px;
            margin: 1.5rem auto 0;
            opacity: 0.8;
        }
        
        /* 分类筛选 */
        .filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-bottom: 2.5rem;
            padding: 0 1rem;
        }
        
        .filter-tag {
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 20px;
            padding: 6px 18px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .filter-tag:hover, .filter-tag.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        
        /* 区块标题样式 */
        .section {
            margin-bottom: 3rem;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--dark);
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title i {
            color: var(--primary);
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -0.76rem;
            width: 40px;
            height: 3px;
            background-color: var(--primary);
        }
        
        .section-actions {
            display: flex;
            gap: 10px;
        }
        
        .view-toggle {
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .view-toggle:hover, .view-toggle.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 许愿卡片基础样式 */
        .wish-card {
            background-color: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            margin-bottom: 1.5rem;
            border: none;
            position: relative;
        }
        
        .wish-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }
        
        .wish-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background-color: var(--primary);
            opacity: 0;
            transition: var(--transition);
        }
        
        .wish-card:hover::before {
            opacity: 1;
        }
        
        .card-body {
            padding: 1.25rem;
        }
        
        /* 许愿类型标签 */
        .wish-type {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-right: 8px;
            margin-bottom: 10px;
        }
        
        .type-life {
            background-color: rgba(54, 211, 153, 0.1);
            color: var(--success);
        }
        
        .type-dream {
            background-color: rgba(123, 97, 255, 0.1);
            color: var(--secondary);
        }
        
        .type-gift {
            background-color: rgba(255, 171, 0, 0.1);
            color: var(--warning);
        }
        
        .type-travel {
            background-color: rgba(255, 94, 132, 0.1);
            color: var(--primary);
        }
        
        /* 图片容器样式 */
        .image-container {
            position: relative;
            overflow: hidden;
        }
        
        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .wish-card:hover .card-image {
            transform: scale(1.05);
        }
        
        /* 多图布局 */
        .multi-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
            height: 100%;
        }
        
        .multi-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .multi-images.count-1 {
            grid-template-columns: 1fr;
        }
        
        .multi-images.count-3 {
            grid-template-rows: repeat(2, 1fr);
        }
        
        .multi-images.count-3 .multi-image:first-child {
            grid-column: span 2;
        }
        
        .multi-images.count-4 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }
        
        /* 内容样式 */
        .wish-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--dark);
            transition: var(--transition);
            line-height: 1.4;
        }
        
        .wish-card:hover .wish-title {
            color: var(--primary);
        }
        
        .wish-content {
            color: var(--dark);
            font-size: 0.95rem;
            margin-bottom: 1rem;
            line-height: 1.6;
            opacity: 0.85;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 1rem;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .author-details {
            display: flex;
            flex-direction: column;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        /* 互动统计 */
        .wish-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            padding-top: 0.75rem;
            border-top: 1px dashed var(--light-gray);
        }
        
        .stat-group {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: var(--transition);
            color: var(--gray);
        }
        
        .stat-item:hover {
            color: var(--primary);
        }
        
        .stat-item.liked {
            color: var(--primary);
        }
        
        .stat-item.saved {
            color: var(--secondary);
        }
        
        .action-buttons {
            display: flex;
            gap: 8px;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.85rem;
            padding: 4px 8px;
            border-radius: 4px;
        }
        
        .action-btn:hover {
            background-color: rgba(255, 94, 132, 0.1);
            color: var(--primary);
        }
        
        /* 标签样式 */
        .wish-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 1rem 0;
        }
        
        .wish-tag {
            background-color: #FFF0F3;
            padding: 3px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            color: var(--primary);
            transition: var(--transition);
        }
        
        .wish-tag:hover {
            background-color: var(--primary);
            color: white;
        }
        
        /* 布局样式 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 1.5rem;
        }
        
        .list-layout .wish-card {
            display: flex;
            height: 260px;
        }
        
        .list-layout .image-container {
            flex: 0 0 30%;
        }
        
        .list-layout .card-body {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-layout .wish-stats {
            margin-top: auto;
        }
        
        .featured-wish {
            display: flex;
            flex-direction: column;
            border: 1px solid var(--light-gray);
            overflow: hidden;
        }
        
        .featured-image-container {
            height: 300px;
        }
        
        .featured-content {
            padding: 1.5rem;
        }
        
        .featured-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        .featured-content .wish-content {
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }
        
        /* 无图许愿样式 */
        .no-image-card {
            border: 1px solid var(--light-gray);
        }
        
        .no-image-header {
            background-color: #FFF5F7;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .list-layout .wish-card {
                flex-direction: column;
                height: auto;
            }
            
            .list-layout .image-container {
                flex: 0 0 200px;
            }
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 2rem;
            }
            
            .section-title {
                font-size: 1.3rem;
            }
            
            .grid-layout {
                grid-template-columns: 1fr;
            }
            
            .featured-image-container {
                height: 220px;
            }
            
            .featured-title {
                font-size: 1.5rem;
            }
        }
        
        /* 发布新愿望按钮 */
        .post-wish-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 4px 15px rgba(255, 94, 132, 0.3);
            transition: var(--transition);
            border: none;
            cursor: pointer;
            z-index: 100;
        }
        
        .post-wish-btn:hover {
            transform: scale(1.1) rotate(90deg);
            background-color: var(--primary-light);
        }
    </style>
</head>
<body>
    <div class="container py-4 px-4">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">心愿墙</h1>
            <p class="page-subtitle">分享你的愿望，见证梦想的力量，或许会有惊喜等着你</p>
            
            <!-- 分类筛选 -->
            <div class="filter-bar">
                <div class="filter-tag active">全部愿望</div>
                <div class="filter-tag">生活愿望</div>
                <div class="filter-tag">梦想目标</div>
                <div class="filter-tag">礼物心愿</div>
                <div class="filter-tag">旅行计划</div>
            </div>
        </div>
        
        <!-- 1. 热门愿望 -->
        <section class="section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-star"></i> 热门愿望</h2>
                <div class="section-actions">
                    <div class="view-toggle active" data-view="grid"><i class="fas fa-th"></i></div>
                    <div class="view-toggle" data-view="list"><i class="fas fa-list"></i></div>
                </div>
            </div>
            
            <div class="wish-card featured-wish">
                <div class="image-container featured-image-container">
                    <img src="https://picsum.photos/1200/600?random=30" alt="环球旅行愿望" class="card-image">
                </div>
                <div class="featured-content">
                    <div>
                        <span class="wish-type type-travel">旅行计划</span>
                        <span class="wish-type type-dream">梦想目标</span>
                    </div>
                    <h3 class="featured-title wish-title">30岁前完成环球旅行，探索10个国家的文化</h3>
                    <p class="wish-content">
                        从小就梦想着能够环游世界，亲眼看看不同国家的风景和文化。计划在30岁前完成这个愿望，已经去过3个国家，还想探索日本、冰岛、意大利、埃及、巴西、南非、新西兰、加拿大、印度和土耳其。希望能记录下每个地方的故事和美食，结交不同国家的朋友。
                    </p>
                    
                    <div class="wish-tags">
                        <span class="wish-tag">旅行</span>
                        <span class="wish-tag">梦想</span>
                        <span class="wish-tag">文化探索</span>
                        <span class="wish-tag">30岁目标</span>
                    </div>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=70" alt="旅行者小周的头像" class="author-avatar">
                        <div class="author-details">
                            <div class="author-name">旅行者小周</div>
                            <div class="post-time">发布于 2023-05-20 · 6个月前</div>
                        </div>
                    </div>
                    
                    <div class="wish-stats">
                        <div class="stat-group">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>12,543</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>342</span>
                            </div>
                            <div class="stat-item liked">
                                <i class="fas fa-heart"></i>
                                <span>2,876</span>
                            </div>
                            <div class="stat-item saved">
                                <i class="fas fa-bookmark"></i>
                                <span>954</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-comment"></i> 留言
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 2. 最新愿望 - 网格布局 -->
        <section class="section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-clock"></i> 最新愿望</h2>
                <div class="section-actions">
                    <div class="view-toggle active" data-view="grid"><i class="fas fa-th"></i></div>
                    <div class="view-toggle" data-view="list"><i class="fas fa-list"></i></div>
                </div>
            </div>
            
            <div class="grid-layout" id="latest-wishes">
                <!-- 多图愿望1 -->
                <div class="wish-card">
                    <div class="image-container" style="height: 180px;">
                        <div class="multi-images count-3">
                            <img src="https://picsum.photos/600/400?random=31" alt="手工陶艺工作室图片1" class="multi-image">
                            <img src="https://picsum.photos/600/400?random=32" alt="手工陶艺工作室图片2" class="multi-image">
                            <img src="https://picsum.photos/600/400?random=33" alt="手工陶艺工作室图片3" class="multi-image">
                        </div>
                    </div>
                    <div class="card-body">
                        <span class="wish-type type-dream">梦想目标</span>
                        <h3 class="wish-title">开设自己的手工陶艺工作室，传承传统技艺</h3>
                        <p class="wish-content">
                            学习陶艺已经5年了，希望能拥有一个属于自己的小工作室，不仅能创作，还能开设课程，让更多人了解和喜欢这项传统艺术。
                        </p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">陶艺</span>
                            <span class="wish-tag">创业</span>
                            <span class="wish-tag">手工艺</span>
                        </div>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=71" alt="陶艺人小林的头像" class="author-avatar">
                            <div class="author-details">
                                <div class="author-name">陶艺人小林</div>
                                <div class="post-time">2小时前</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-group">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>256</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>18</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>89</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-bookmark"></i>
                                    <span>34</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图愿望1 -->
                <div class="wish-card no-image-card">
                    <div class="no-image-header">
                        <span class="wish-type type-life">生活愿望</span>
                    </div>
                    <div class="card-body">
                        <h3 class="wish-title">希望能坚持每天阅读1小时，一年读完50本书</h3>
                        <p class="wish-content">
                            感觉自己越来越浮躁，想通过阅读来沉淀自己。目标是每天坚持阅读1小时，一年读完50本书，涵盖文学、历史、心理学等不同领域。正在寻找一起打卡的同伴！
                        </p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">阅读</span>
                            <span class="wish-tag">自我提升</span>
                            <span class="wish-tag">习惯养成</span>
                        </div>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=72" alt="书友小王的头像" class="author-avatar">
                            <div class="author-details">
                                <div class="author-name">书友小王</div>
                                <div class="post-time">昨天</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-group">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>678</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>45</span>
                                </div>
                                <div class="stat-item liked">
                                    <i class="fas fa-heart"></i>
                                    <span>231</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-bookmark"></i>
                                    <span>87</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 单图愿望1 -->
                <div class="wish-card">
                    <div class="image-container" style="height: 180px;">
                        <img src="https://picsum.photos/600/400?random=34" alt="流浪动物救助站照片" class="card-image">
                    </div>
                    <div class="card-body">
                        <span class="wish-type type-life">生活愿望</span>
                        <h3 class="wish-title">为社区流浪动物建立一个小型救助站</h3>
                        <p class="wish-content">
                            小区里有很多流浪猫狗，冬天快到了，希望能建立一个小型救助站，为它们提供食物、水和温暖的住所，也希望能帮助它们找到永久的家。
                        </p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">动物保护</span>
                            <span class="wish-tag">公益</span>
                            <span class="wish-tag">社区服务</span>
                        </div>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=73" alt="爱猫人士小李的头像" class="author-avatar">
                            <div class="author-details">
                                <div class="author-name">爱猫人士小李</div>
                                <div class="post-time">3天前</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-group">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>1,243</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>98</span>
                                </div>
                                <div class="stat-item liked">
                                    <i class="fas fa-heart"></i>
                                    <span>567</span>
                                </div>
                                <div class="stat-item saved">
                                    <i class="fas fa-bookmark"></i>
                                    <span>210</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 多图愿望2 -->
                <div class="wish-card">
                    <div class="image-container" style="height: 180px;">
                        <div class="multi-images count-4">
                            <img src="https://picsum.photos/600/400?random=35" alt="烘焙作品展示1" class="multi-image">
                            <img src="https://picsum.photos/600/400?random=36" alt="烘焙作品展示2" class="multi-image">
                            <img src="https://picsum.photos/600/400?random=37" alt="烘焙作品展示3" class="multi-image">
                            <img src="https://picsum.photos/600/400?random=38" alt="烘焙作品展示4" class="multi-image">
                        </div>
                    </div>
                    <div class="card-body">
                        <span class="wish-type type-gift">礼物心愿</span>
                        <h3 class="wish-title">想要一套专业的烘焙工具，为家人制作健康甜点</h3>
                        <p class="wish-content">
                            最近爱上了烘焙，但家里的工具太简陋了。希望能有一套专业的烘焙工具，包括烤箱、打蛋器、模具等，这样就能为家人制作更多健康美味的甜点了。
                        </p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">烘焙</span>
                            <span class="wish-tag">美食</span>
                            <span class="wish-tag">家庭</span>
                        </div>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=74" alt="甜点爱好者小陈的头像" class="author-avatar">
                            <div class="author-details">
                                <div class="author-name">甜点爱好者小陈</div>
                                <div class="post-time">1周前</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-group">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>876</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>56</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>321</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-bookmark"></i>
                                    <span>109</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图愿望2 -->
                <div class="wish-card no-image-card">
                    <div class="no-image-header">
                        <span class="wish-type type-dream">梦想目标</span>
                    </div>
                    <div class="card-body">
                        <h3 class="wish-title">希望能在年底前学会弹吉他，给女朋友唱首情歌</h3>
                        <p class="wish-content">
                            和女朋友在一起3年了，她一直希望我能为她弹唱一首歌。我是音乐小白，希望能在年底前学会弹吉他，至少能完整弹奏一首情歌，给她一个惊喜。求推荐适合初学者的吉他和教程！
                        </p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">音乐</span>
                            <span class="wish-tag">学习</span>
                            <span class="wish-tag">爱情</span>
                        </div>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=75" alt="小明的头像" class="author-avatar">
                            <div class="author-details">
                                <div class="author-name">小明</div>
                                <div class="post-time">2周前</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-group">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>1,567</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>124</span>
                                </div>
                                <div class="stat-item liked">
                                    <i class="fas fa-heart"></i>
                                    <span>876</span>
                                </div>
                                <div class="stat-item saved">
                                    <i class="fas fa-bookmark"></i>
                                    <span>345</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 单图愿望2 -->
                <div class="wish-card">
                    <div class="image-container" style="height: 180px;">
                        <img src="https://picsum.photos/600/400?random=39" alt="山地自行车照片" class="card-image">
                    </div>
                    <div class="card-body">
                        <span class="wish-type type-gift">礼物心愿</span>
                        <span class="wish-type type-life">生活愿望</span>
                        <h3 class="wish-title">想要一辆山地自行车，周末可以去郊外骑行</h3>
                        <p class="wish-content">
                            工作太忙，很少运动，希望能有一辆山地自行车，周末可以和朋友一起去郊外骑行，锻炼身体，呼吸新鲜空气，远离城市的喧嚣。
                        </p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">运动</span>
                            <span class="wish-tag">户外</span>
                            <span class="wish-tag">健康</span>
                        </div>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=76" alt="上班族小张的头像" class="author-avatar">
                            <div class="author-details">
                                <div class="author-name">上班族小张</div>
                                <div class="post-time">3周前</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-group">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>765</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>43</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>234</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-bookmark"></i>
                                    <span>87</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 3. 愿望清单 - 列表布局 -->
        <section class="section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-list-check"></i> 愿望清单</h2>
                <div class="section-actions">
                    <div class="view-toggle" data-view="grid"><i class="fas fa-th"></i></div>
                    <div class="view-toggle active" data-view="list"><i class="fas fa-list"></i></div>
                </div>
            </div>
            
            <div class="list-layout" id="wish-list">
                <!-- 列表项1 - 多图 -->
                <div class="wish-card">
                    <div class="image-container">
                        <div class="multi-images count-2">
                            <img src="https://picsum.photos/600/400?random=40" alt="摄影器材图片1" class="multi-image">
                            <img src="https://picsum.photos/600/400?random=41" alt="摄影器材图片2" class="multi-image">
                        </div>
                    </div>
                    <div class="card-body">
                        <span class="wish-type type-gift">礼物心愿</span>
                        <h3 class="wish-title">希望拥有一台专业相机，记录生活中的美好瞬间</h3>
                        <p class="wish-content">
                            一直对摄影很感兴趣，希望能有一台专业相机，学习摄影技巧，记录身边的人和事，捕捉生活中的美好瞬间。主要用于人像和风景摄影。
                        </p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">摄影</span>
                            <span class="wish-tag">爱好</span>
                            <span class="wish-tag">记录生活</span>
                        </div>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=77" alt="摄影爱好者阿杰的头像" class="author-avatar">
                            <div class="author-details">
                                <div class="author-name">摄影爱好者阿杰</div>
                                <div class="post-time">1个月前</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-group">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>1,345</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>87</span>
                                </div>
                                <div class="stat-item liked">
                                    <i class="fas fa-heart"></i>
                                    <span>456</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-bookmark"></i>
                                    <span>123</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn">
                                    <i class="far fa-comment"></i> 留言
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 列表项2 - 无图 -->
                <div class="wish-card no-image-card">
                    <div class="card-body">
                        <span class="wish-type type-life">生活愿望</span>
                        <h3 class="wish-title">希望能学会做10道拿手菜，给家人一个惊喜</h3>
                        <p class="wish-content">
                            作为一个厨房小白，希望能在半年内学会做10道拿手菜，包括家常菜和几道硬菜，下次家庭聚会的时候能露一手，给家人一个惊喜。目前已经学会了西红柿炒鸡蛋和拍黄瓜，求简单易学的菜谱推荐！
                        </p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">美食</span>
                            <span class="wish-tag">烹饪</span>
                            <span class="wish-tag">家庭</span>
                        </div>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=78" alt="小厨娘丽丽的头像" class="author-avatar">
                            <div class="author-details">
                                <div class="author-name">小厨娘丽丽</div>
                                <div class="post-time">1个月前</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-group">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>987</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>65</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>345</span>
                                </div>
                                <div class="stat-item saved">
                                    <i class="fas fa-bookmark"></i>
                                    <span>98</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn">
                                    <i class="far fa-comment"></i> 留言
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 列表项3 - 单图 -->
                <div class="wish-card">
                    <div class="image-container">
                        <img src="https://picsum.photos/600/400?random=42" alt="志愿者活动照片" class="card-image">
                    </div>
                    <div class="card-body">
                        <span class="wish-type type-dream">梦想目标</span>
                        <h3 class="wish-title">希望每年能参加至少4次公益志愿者活动</h3>
                        <p class="wish-content">
                            一直想为社会做些力所能及的贡献，希望能坚持每年参加至少4次公益志愿者活动，包括敬老院看望老人、山区支教、环保活动等。有同样想法的朋友可以一起组队！
                        </p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">公益</span>
                            <span class="wish-tag">志愿者</span>
                            <span class="wish-tag">社会责任</span>
                        </div>
                        
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=79" alt="志愿者小吴的头像" class="author-avatar">
                            <div class="author-details">
                                <div class="author-name">志愿者小吴</div>
                                <div class="post-time">2个月前</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-group">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>2,109</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>156</span>
                                </div>
                                <div class="stat-item liked">
                                    <i class="fas fa-heart"></i>
                                    <span>987</span>
                                </div>
                                <div class="stat-item saved">
                                    <i class="fas fa-bookmark"></i>
                                    <span>456</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn">
                                    <i class="far fa-comment"></i> 留言
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    
    <!-- 发布新愿望按钮 -->
    <button class="post-wish-btn" title="发布新愿望">
        <i class="fas fa-plus"></i>
    </button>

    <script>
        // 点赞功能
        document.querySelectorAll('.stat-item .fa-heart').forEach(icon => {
            icon.parentElement.addEventListener('click', function(e) {
                e.stopPropagation();
                
                const isLiked = this.classList.contains('liked');
                const countEl = this.querySelector('span');
                let count = parseInt(countEl.textContent.replace(',', ''));
                
                if (isLiked) {
                    this.classList.remove('liked');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    count--;
                } else {
                    this.classList.add('liked');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    count++;
                }
                
                countEl.textContent = count.toLocaleString();
                showToast(isLiked ? "取消点赞" : "点赞成功");
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.stat-item .fa-bookmark').forEach(icon => {
            icon.parentElement.addEventListener('click', function(e) {
                e.stopPropagation();
                
                const isSaved = this.classList.contains('saved');
                const countEl = this.querySelector('span');
                let count = parseInt(countEl.textContent.replace(',', ''));
                
                if (isSaved) {
                    this.classList.remove('saved');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    count--;
                } else {
                    this.classList.add('saved');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    count++;
                }
                
                countEl.textContent = count.toLocaleString();
                showToast(isSaved ? "取消收藏" : "收藏成功");
            });
        });
        
        // 浏览量点击效果（模拟）
        document.querySelectorAll('.stat-item .fa-eye').forEach(icon => {
            icon.parentElement.addEventListener('click', function(e) {
                e.stopPropagation();
                const countEl = this.querySelector('span');
                let count = parseInt(countEl.textContent.replace(',', ''));
                count++;
                countEl.textContent = count.toLocaleString();
            });
        });
        
        // 评论按钮点击
        document.querySelectorAll('.action-btn, .stat-item .fa-comment').forEach(btn => {
            btn.parentElement.addEventListener('click', function(e) {
                e.stopPropagation();
                const title = this.closest('.wish-card').querySelector('.wish-title').textContent;
                showToast(`查看 "${title}" 的评论区`);
            });
        });
        
        // 视图切换功能
        document.querySelectorAll('.view-toggle').forEach(toggle => {
            toggle.addEventListener('click', function() {
                // 切换当前激活状态
                const section = this.closest('.section-header').nextElementSibling;
                const viewType = this.getAttribute('data-view');
                
                // 更新按钮状态
                this.parentElement.querySelectorAll('.view-toggle').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
                
                // 切换布局
                if (viewType === 'grid') {
                    section.classList.remove('list-layout');
                    section.classList.add('grid-layout');
                } else {
                    section.classList.remove('grid-layout');
                    section.classList.add('list-layout');
                }
            });
        });
        
        // 分类筛选
        document.querySelectorAll('.filter-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                document.querySelectorAll('.filter-tag').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
                showToast(`已筛选: ${this.textContent}`);
            });
        });
        
        // 卡片点击事件
        document.querySelectorAll('.wish-card').forEach(card => {
            card.addEventListener('click', function() {
                const title = this.querySelector('.wish-title').textContent;
                showToast(`查看愿望详情: ${title}`);
                // 实际应用中这里会跳转到详情页
                // window.location.href = 'wish-detail.html';
            });
        });
        
        // 发布新愿望按钮
        document.querySelector('.post-wish-btn').addEventListener('click', function(e) {
            e.stopPropagation();
            showToast('准备发布新愿望');
            // 实际应用中这里会打开发布愿望的表单
        });
        
        
    </script>
</body>
</html>
    
